<template>
    <div class="resetPwd">
        <section class="main">
            <h3>修改密码</h3>
            <br>
            <el-input v-model="password" type="password" placeholder="请输入密码,密码6-16位字符，包含字母和数字" class="handle-input"></el-input>
            <br>
            <el-input v-model="repassword" type="password" placeholder="请再次输入密码,密码6-16位字符，包含字母和数字" class="handle-input"></el-input>
            <br>
            <el-button type="primary" class="btne" @click="apply()">修改密码</el-button>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            password: "",
            repassword: ""
        };
    },
    created() {
        console.log(11111);
    },
    methods: {
        apply() {
            let data = { password: this.password };
            if (this.password != this.repassword) {
                hToast("两次密码输入不同");
                return;
            }
            if (
                /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(
                    this.password
                )
            ) {
                this.$.Post("/system/api/system/updatePassword.htm", data, re => {
                    hToast("密码修改成功，请重新登录");
                    this.$router.push("/login");
                });
            } else {
                hToast("密码6-16位字符，包含字母和数字");
            }
        }
    }
};
</script>

<style lang="scss">
.resetPwd {
    .main {
        background-color: white;
        margin: 20px;
        padding: 30px 0;
        > h3 {
            text-align: center;
        }
        .handle-input {
            width: 300px;
            display: block;
            margin: 0 auto;
        }
        .btne {
            width: 300px;
            display: block;
            margin: 0 auto;
        }
    }
}
</style>
